<!DOCTYPE html>
<html lang="en">
{% load filters %}

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vmBox</title>
    <link rel="stylesheet" href="/static/eui/index.css">
    <style>
        /* 隐藏滚动条 */
        ::-webkit-scrollbar {
            display: none;
        }

        /* 或者自定义滚动条样式 */
        ::-webkit-scrollbar {
            width: 10px;
            background-color: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #888;
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: #555;
        }
    </style>

    <style>
        #app {
            width: calc(100vw - 16px);
            height: calc(100vh - 16px);
        }

        #iHostBar {
            border-radius: 3px;
            background-color: rgba(104, 194, 194, 0.61);
        }

        #iHostBar:hover {
            padding: 3px 3px;
            background-color: rgb(104, 194, 194);
        }

        /** 主机状态栏样式 */
        #hostBarId {
            background-color: rgba(218, 218, 218, 0.353);
            position: absolute;
            left: 0px;
            top: 0px;
            height: calc(100vh - 75px - 16px);
            width: 399px;
            border-radius: 8px;
        }

        .host {
            background-color: #b8b8b849;
            border-width: 2px;
            border-style: solid;
            border-color: rgba(255, 255, 255, 0);
        }

        .activity_select_host {
            border-color: rgb(83, 183, 183);

        }

        .host:hover {
            border-color: rgb(83, 183, 183);
        }

        #HostBarOverflowYStyle {
            overflow-y: scroll;
            height: calc(100vh - 75px - 16px);
            position: absolute;
            left: 8px;
            top: 83px;
            width: 100vw;
            -ms-overflow-style: none;
        }

        .noSelect {
            user-select: none;
        }

        .menu_border {
            border-width: 2px;
            border-color: rgb(83, 83, 83);
            border-style: solid;
            border-radius: 5px;
        }

        ul {
            margin: 8px 3px;
            z-index: 2;
            background-color: rgb(214, 214, 214);
            border-width: 2px;
            border-color: rgb(83, 83, 83);
            border-style: solid;
            border-radius: 5px;
        }

        li {
            margin: 3px 0;
            background-color: #8b8a8acc;
            margin-right: 13px;
            text-align: center;
            position: relative;
        }

        .edit_bar {
            position: absolute;
            top: 86px;
            left: 411px;
        }

        .desktop_all {
            position: absolute;
            top: 0px;
            left: 0px;
        }

        #localhost_vnc:hover {
            cursor: pointer;
        }

        .img_disable {
            margin-right: 8px;
        }

        #disconnect_button {
            padding: 1px 1px;
            border-width: 0px;
        }

        #disconnect_button:hover {
            padding: 3px 3px;
        }

        .topar {
            background-color: #6c6b6b32;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            border-radius: 3px;
        }

        .topbar_list {
            background-color: rgba(154, 207, 214, 0);
            margin: 0px 0px;
            padding: 0px 0px;
            float: right;
        }

        .el-divider {
            background-color: #6b6b6bb8;
        }

        .mw3 {
            margin: 0px 3px;
        }

        .line_color {
            color: rgba(9, 167, 188, 0.849)
        }

        .el-tree-node {
            overflow-x: visible;
            display: inline-block;
        }

        .scrollBar::-webkit-scrollbar {
            display: block;
            height: 5px;
            background-color: #6866669c;
        }

        .el-table__body-wrapper::-webkit-scrollbar {
            display: block;
            height: 7px;
            background-color: #6866669c;
        }

        .box-card>.el-card__body {
            padding: 5px 10px;
        }

        .box-card {
            width: 160px;
        }

        .el-card {
            font-size: 15px;
            margin: 0px 0px;
        }

        .menu_right:hover {
            background-color: #d3d2d2b6;
        }
        #host-divider {
            margin: 6px 0px;
        }

        #flush {
            transition:transform 1s;
           
        }
        #flush:active {
            transform: rotate(360deg);
        }
        .el-form-item {
            margin-bottom: 9px;
        }
        .el-scrollbar__view {
            background: width;
            border-width: 0px;
            background-color: white;
            
        }

        .el-select-dropdown__item {
            background-color: white;
            margin-right: 0px;
        }

        .el-select-dropdown__item:hover {
            background-color: rgba(177, 179, 179, 0.377);
        }
        .el-tree-node  {
            width: 100%;
        }
    </style>
</head>

<body>

    <div id="app" style="display: none" @contextmenu="resetRightClick">
        <!-- topbar -->
        <div class="topar" v-show="hostBarShow"  style="width: 100%;  height: 75px; ">
            <div style="height: 33px;background-color: #0d779d00;">
                <div style="float: right; padding-right: 5px;padding-top: 2px;">
                    <el-avatar style=" height: 46px;width: 46px; margin-right: 3px;margin-top: 3px;"
                        src="/static/img/admin_user.jpeg"></el-avatar>
                </div>
            </div>
            <!-- topbar 菜单 -->
            <div style="height: 22px;">
                <!-- 左侧菜单 -->
                <div style="position: absolute; left: 0px;margin-left: 10px">
                    <ul style="margin: 0px 0px; 
                        padding-left: 6px;
                        border-width: 0px; 
                        background-color: rgba(9, 167, 188, 0); 
                        list-style-type: none; z-index: 9;"
                    >

                        <li class="topbar_list" style="cursor: pointer;">
                            <a href="/scrcpy/" style="z-index: 9; user-select: none;color:rgba(9, 167, 188, 0.849);text-decoration: none;">
                                <i class="el-icon-mobile-phone">云手机</i>
                            </a>
                        </li>
                        <li class="topbar_list" style="pointer-events: none;"><el-divider direction="vertical"></el-divider> </li>

                        <li class="topbar_list" style="cursor: pointer;">
                            <el-dropdown v-show="hostBarShow"
                                style="font-size: 16px;  z-index: 9; user-select: none; color: rgba(9, 167, 188, 0.849)"
                                @command="chRouter">
                                <span>
                                    <i class="el-icon-s-cooperation">平台配置</i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="user" style="background-color: white;">
                                        <i class="el-icon-user"></i>用户管理
                                    </el-dropdown-item>
                                    <el-dropdown-item command="group" style="background-color: white;">
                                        <i class="el-icon-office-building"></i>分组管理
                                    </el-dropdown-item>
                                    <el-dropdown-item command="role" style="background-color: white;">
                                        <i class="el-icon-postcard"></i>系统授权
                                    </el-dropdown-item>
                                    <el-dropdown-item command="system" style="background-color: white;">
                                        <i class="el-icon-s-tools"></i>系统配置
                                    </el-dropdown-item>

                                </el-dropdown-menu>
                            </el-dropdown>
                        </li>
                        <li class="topbar_list" style="pointer-events: none;"><el-divider direction="vertical"></el-divider> </li>

                        <li class="topbar_list" style="cursor: pointer;">
                            <div v-show="hostBarShow" @click="toPath" path="host"
                                style="z-index: 9; user-select: none;color:rgba(9, 167, 188, 0.849)">
                                <i class="el-icon-s-home"  path="host" >首页</i>
                            </div>
                        </li>
                    </ul>
                </div>

                <!-- 右侧菜单 -->
                <div style="position: absolute; right: 0px;margin-right: 10px">
                    <ul
                        style="margin: 20px 0px; border-width: 0px; background-color: rgba(9, 167, 188, 0); list-style-type: none; z-index: 9;">
                        <li class="topbar_list">
                            <a v-show="hostBarShow" href="/logout"
                                style=" z-index: 9; color: rgba(9, 167, 188, 0.849); text-decoration: none">退出登录
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div v-if="router == 'host'">
            <!-- leftbar -->
            <div id="HostBarOverflowYStyle" v-show="hostBarShow ">
                {# 主机栏 #}
                <div v-show="hostBarShow" id="hostBarId" :style="{width: hostBar}">
                    <el-dialog
                    title="新建虚拟机"
                    :visible.sync="createHostPage"
                    width="30%"
                    >
                        <span>待开发中...</span>
                        <span slot="footer" class="dialog-footer">
                        </span>
                    </el-dialog>
                    <el-divider id="host-divider"></el-divider>
                    <div style="height: 60px; padding-left: 20px">
                        <el-button style="padding: 5px 10px; margin-top: 3px" type="primary" @click="createHostPage = !createHostPage">
                            <i class="el-icon-s-platform" style="font-size: 27px" ></i>
                            <br />
                            <span class="icon-name" style="font-size: 13px">创建主机</span>
                        </el-button>
                               
                        <el-button style="padding: 5px 10px; margin-top: 3px" type="primary">
                            <i class="el-icon-cpu" style="font-size: 27px" ></i>
                            <br />
                            <span class="icon-name" style="font-size: 13px">设备管理</span>
                        </el-button>

                        <el-button style="padding: 5px 10px; margin-top: 3px" type="primary">
                            <i class="el-icon-files" style="font-size: 27px" ></i>
                            <br />
                            <span class="icon-name" style="font-size: 13px">存储管理</span>
                        </el-button>
                        
                        <el-button style="padding: 5px 10px; margin-top: 3px" type="primary">
                            <i class="el-icon-setting" style="font-size: 27px" ></i>
                            <br />
                            <span class="icon-name" style="font-size: 13px">系统配置</span>
                        </el-button>
                    </div>
                    <el-divider id="host-divider"></el-divider>
                    
                    {# 虚拟机列表 #}
                    {% for host in map %}
                    <div @contextmenu="rightClick" name="{{ host.host }}" protocol={{host.desktop}}
                        act='{{host.state|virt_host_status:"bool"}}' style="margin: 3px 0;border-radius: 5px"
                        class="host">
                        <div class="noSelect"
                            style="width: 70px;height: 89px; float: left;">
                            <!-- <img src="/static/img/host.png" width="70px"
                                style='float: left;margin-right: 8px;margin-top: 1px;{{host.state|virt_host_status:"img"}}' /> -->
                                <i class="el-icon-s-platform" style="font-size: 60px;padding-top: 15px; color:rgba(105, 195, 131, 0.874); {{host.state|virt_host_status:"img"}};"></i>
                        </div>
                        <div
                            style='width: calc( 100% - 70px ); height: 89px; margin-left: 70px;  '>
                            <div>主机名:{{ host.host }}</div>
                            <div class="noSelect">内存: {{ host.memory }}</div>
                            <div class="noSelect">处理器: {{ host.vcpu }}</div>
                            <div class="noSelect">
                                状态: {{ host.state|virt_host_status:"status"}}
                                {% if host.state|virt_host_status:"bool" %}
                                <div style="float: right">
                                    <el-button type="warning" icon="el-icon-connection" style="padding: 5px 5px;" circle
                                        @click="hostButtonOper" code="connect" title="连接桌面"></el-button>
                                    <el-button type="danger" icon="el-icon-video-pause"
                                        style="padding: 5px 5px;margin-left: 2px;" circle @click="hostButtonOper"
                                        code="stop" title="关机"></el-button>
                                </div>
                                {% else %}
                                <div style="float: right">
                                    <el-button type="success" icon="el-icon-video-play"
                                        style="padding: 5px 5px;margin-left: 2px;" circle @click="hostButtonOper"
                                        code="start" title="开机"></el-button>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <!-- <el-divider id="host-divider"></el-divider> -->
                    {% endfor %}
                </div>
                {# 右键功能菜单 #}

                <div @contextmenu="resetRightClick" id="mouseRightMenu" v-show="mouseRightMenuShow && hostBarShow "
                    :style="mouseRightMenuStyle" @mouseleave="mouseRightMenuLeave">

                    <el-card class="box-card">
                        <div @click="operationClick" v-if="act == 'True'" class="menu_right" :id="k" v-for='(v,k,i) in 
                                {
                                    "connect": "连接桌面",
                                    "shutdown": "关机",
                                    "destroy": "强制关机",
                                    "stop": "停止",
                                    "restart": "重启",
                                    "up":"挂起",
                                    "clone": "克隆",
                                    "delete": "删除"
                                }
                            ' :key="k" style="text-align: center; 
                            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
                            padding: 2px 6px; user-select: none; ">
                            [[v]]
                        </div>
                        <div @click="operationClick" v-if="act == 'False'" class="menu_right" :id="k" v-for='(v,k,i) in 
                            {
                                "start": "开机", 
                                "load": "恢复",
                                "clone": "克隆",
                                "delete": "删除"
                            }
                        ' :key="k" style="text-align: center; 
                        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
                        padding: 2px 6px; user-select: none; ">
                            [[v]]
                        </div>
                    </el-card>
                </div>
            </div>
            <!--   display   -->
            <div id="display" class="edit_bar">
                <div v-show="display == 'spice'">
                    <div id="spice-area">
                        <div id="spice-screen" class="spice-screen"></div>
                    </div>
                </div>
                <div v-show="display == 'vnc'">
                    <div id="screen"></div>
                </div>
                <div v-show="display == 'clone'">
                </div>
                <img v-show="display == '' && !hostBarShow" src="/static/img/operation.png"
                    style="width: 80%; margin: 50px 55px;">
            </div>
            <!-- operationButton -->
            <div>
                <!-- 断开连接 -->
                <el-button type="danger" icon="el-icon-close" circle
                    v-show="(display == 'vnc' || display == 'spice') && hostBarShow && !loading" id="disconnect_button"
                    title="断开连接" @click="disconnect"
                    style=" position: absolute;right: 6px; bottom: 25px; z-index: 9; user-select: none; background-color: rgba(235, 91, 91, 0.378);border-color: rgba(235, 91, 91, 0.378)">
                </el-button>

                <!--   主机收放按钮   -->
                <i v-show="display == 'vnc' || display == 'spice'" :title="hostBarShow? '收起' : '打开'" id='iHostBar'
                    :class="hostBarShow? 'el-icon-full-screen' : 'el-icon-copy-document'" @click="hostOperation"
                    @contextmenu="fullScreen" type="primary" :style="hostOperationStyle">
                </i>
            </div>
        </div>

        <!-- 用户页 -->
        <div v-if="router == 'user'" style="width: 100%; height: calc( 100% - 81px ); margin-top: 6px;">
            <!-- 组织树 -->
            <el-tree indent="9" style="float: left;width: 220px; height: 100%;overflow-x: scroll;" :data="groupList"
                 @node-click="handleNodeClick" class="scrollBar">
            </el-tree>

            <div style="height: 55px;background-color: rgb(255, 255, 255)">
                <el-button  @click="addUserDialog = true" type="primary" style="float: left" >添加用户</el-button>
                <el-button type="danger"  style="float: left">删除用户</el-button>
                {% comment %} <i style="float: right" class="el-icon-refresh-right"></i> {% endcomment %}
                <el-button circle id="flush" style="float: right" @click="flushUserList" class="el-icon-refresh" ></el-button>
                <!-- 会话框 -->
                <el-dialog title="添加用户" :visible.sync="addUserDialog"  width="650px"  :close-on-click-modal="false">
                    <el-form label-position="right" label-width="80px" style="padding:  1px 35px 1px 35px;">

                        <el-form-item label="名称">
                            <el-input v-model="userForm.name" name="region"></el-input>
                        </el-form-item>

                        <el-form-item label="账号">
                          <el-input v-model="userForm.username" name="name"></el-input>
                        </el-form-item>

                        <el-form-item label="密码">
                            <el-input v-model="userForm.password" name="type" type="password"></el-input>
                          </el-form-item>
                                                
                        <el-form-item label="角色" class="select_item">
                            <el-select v-model="userForm.role" name="roel"  placeholder="系统管理员" >
                                <el-option label="操作员" value="OPT"></el-option>
                              <el-option label="系统管理员" value="SM"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="邮箱">
                            <el-input v-model="userForm.email" name="type"></el-input>
                        </el-form-item>
                        
                        <el-form-item label="手机号码">
                            <el-input v-model="userForm.phone" name="type"></el-input>
                        </el-form-item>  

                        <el-form-item label="分组">
                            <!-- <el-input v-model="userForm.org" name="type"></el-input>
                             -->
                             <el-tree
                                :data="groupList"
                                :check-strictly="true"
                                show-checkbox
                                :load="true"
                                node-key="id"
                                ref="tree"
                                highlight-current
                                style="position: absolute;
                                    z-index: 10001; 
                                    width: 250px; 
                                    overflow-x: scroll;
                                    border-width: 1px;
                                    border-color: #eeeeee7a;
                                    border-style: inset;"
                                >
                            </el-tree>
                        </el-form-item>

                        <el-form-item size="large">
                            <el-button type="primary" >添加</el-button>
                            <el-button @click="addUserDialog = false" >取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
            </div>
            <el-table :data="userList" style="width: calc( 100% - 223px ); overflow-x: scroll;" >
                <el-table-column type="selection"  width="55"></el-table-column>
                <el-table-column prop="fields.username" label="账号" width="180">
                </el-table-column>
                <el-table-column prop="fields.name" label="姓名" width="188">
                </el-table-column>
                <el-table-column prop="fields.phone" label="手机号" width="190">
                </el-table-column>
                <el-table-column prop="fields.org" label="分组" width="160">
                </el-table-column>
                <el-table-column prop="fields.role" label="角色" width="120">
                </el-table-column>
                <el-table-column prop="fields.email" label="邮箱地址" width="210">
                </el-table-column>
                <el-table-column prop="fields.date_joined" label="注册时间" width="210">
                </el-table-column>
                <el-table-column prop="fields.last_login" label="上次修改时间" width="210">
                </el-table-column>
                <el-table-column prop="fields.id" label="管理" width="150" fixed="right" code="fields.id">
                    <template slot-scope="scope">
                        <span style="cursor: pointer;" class="line_color">档案</span>
                        <el-divider direction="vertical mw3"></el-divider>
                        <span style="cursor: pointer;" class="line_color">编辑</span>
                        <el-divider direction="vertical mw3"></el-divider>
                        <span style="cursor: pointer;" class="line_color" @click="delUser(scope)"  >删除</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div v-if="router == 'role'" style="width: 100%; height: calc( 100% - 81px ); margin-top: 6px;">
            角色
        </div>

        <div v-if="router == 'group'" style="width: 100%; height: calc( 100% - 81px ); margin-top: 6px;">
            组织
        </div>


        <div v-if="router == 'system'" style="width: 100%; height: calc( 100% - 81px ); margin-top: 6px;">
            系统
        </div>


        <i style="position: absolute;top: 10px;" type="primary" v-loading.fullscreen.lock="loading">
        </i>
    </div>

</body>
<script type="module" crossorigin="anonymous">

    import '/static/api/domain.js'
    window._spice_has_module_support = true;
    window.onload = function () {
        /** vue 初始化完成后才进行显示 */
        document.getElementById("app").style.display = "block";
        if (window._spice_has_module_support) return;
        var loader = document.createElement("script");
        loader.src = "thirdparty/browser-es-module-loader/dist/" +
            "browser-es-module-loader.js";
        document.head.appendChild(loader);
    }
</script>

</html>